﻿@page "/chart/candle-stick"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the AAPL historical data with default candle series in the chart. The tooltip and the crosshairs display the data and period information.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the candle type series. The candle type series chart shows financial data and trends at equal intervals. It can often be combined with line and column charts to show the close and volume of the data.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the candle series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/candle'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="AAPL Historical" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Volume" ValueType="Syncfusion.Blazor.Charts.ValueType.Logarithmic" OpposedPosition="true" Interval="20" LabelFormat="n0">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartAxes>
            <ChartAxis Name="secondary" OpposedPosition="true" RowIndex="1" LabelFormat="n0" Title="Price" RangePadding="ChartRangePadding.None" PlotOffset="30">
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            </ChartAxis>
        </ChartAxes>
        <ChartRows>
            <ChartRow Height="30%"></ChartRow>
            <ChartRow Height="70%"></ChartRow>
        </ChartRows>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
            <ChartCrosshairLine Width="1"></ChartCrosshairLine>
        </ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries Type="ChartSeriesType.Column" DataSource="@ChartPoints" Name="Volume" XName="Period" YName="Volume">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" YAxisName="secondary" Name="Apple Inc" XName="Period" High="High" Volume="Volume" Low="Low" Open="Open" Close="Close"
                         BearFillColor="#2ecd71" BullFillColor="#e74c3d" Type="ChartSeriesType.Candle">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    private CandleData[] ChartPoints { get; set; } = new CandleData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<CandleData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class CandleData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }

}


